<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <style>
        body {
            margin: 0;
        }

        .boxContainer{
            
            width: 300px;
            height: 300px;
            border: 1px solid;
            position: relative;
            margin: 100px;
        }
        .box {
            width: 100px;
            height: 100px;
            /* border: 5px solid; */
            background-color: red;
            position: absolute;
            left: 30px;
            top: 50px;
            /* padding: 10px;
            margin: 20px; */
        }

        .container {
            width: 100px;
            height: 2000px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <button>按钮</button>
    <div class="container"></div>
    <div class="boxContainer">
        <div class="box"></div>

    </div>

    <script>
        // 一、jq里元素的尺寸 
        // 1.width height ; 获取元素的宽和高
        // $("button").click(function(){
        //     var w = $(".box").width();
        //     var h = $(".box").height();
        //     console.log(w,h);
        // })


        // 2.innerWidth innerHeight : 自身加上 padding内边距的尺寸；

        // $("button").click(function () {
        //     var w = $(".box").innerWidth();
        //     var h = $(".box").innerHeight();
        //     console.log(w, h);
        // })

        // 3.outerWidth  outerHeight  自身  +  边框 + 内边距padding

        // $("button").click(function () {
        //     var w = $(".box").outerWidth();
        //     var h = $(".box").outerHeight();
        //     console.log(w, h);
        // })

        // 4. outerWidth,outerHeight 里面传入 true参数 获取 自身 +  边框  + 内边距  + 外边距

        // $("button").click(function () {
        //     var w = $(".box").outerWidth(true);
        //     var h = $(".box").outerHeight(true);
        //     console.log(w, h);
        // })

        // 注意 ： width 和height 可以获取尺寸和设置尺寸 ； 其他的只能获取不能设置
        // $("button").click(function () {
        //     $(".box").width("300px");  // 设置宽度 ；
        // });


        // 二 、jq里元素的位置 ；

        // 1.获取 元素 相对于 页面的位置 ；
        // offset 相对于页面的 左边和 上边的位置 ；
        // 获取  设置 ；
        // $("button").click(function(){
        //     // var res =  $(".box").offset(); // 获取元素相对于页面的位置
        //     // console.log(res);
        //     $(".box").offset({left:100,top:100});
        // })

        // 2.获取元素相对于父级的偏移量 
        // 只能获取 ，不能设置 ；
        // $("button").click(function(){
        // //    var res =  $(".box").position();  // 获取元素相对父级的定位 
        // //    console.log(res);
        // // $(".box").position({left:100,top:100});  // 错误的写法 ，不能设置；
        // })

        // 3.滚动卷去的高度  scrollTop
        // 可以获取  也可以设置 
        $(window).scroll(function(){
            // var st = $(window).scrollTop();  // 获取滚动 卷去的高度 
            // console.log(st);
            
        })

        $("button").click(function(){
            $(window).scrollTop(200);
        })

        // 思考 ：动画 回到顶部 ；



    </script>
</body>

</html>